<template>
	<view class="abslrtb flex-column a-center wrap">
		<view class='login-box'>
			<image src="../../../static/bg.jpg" style="width: 100%;height: 100%;"></image>
		</view>
		<view class="form-content">
			<view class="title" style="margin-top: 20px;">宁波拓普</view>
			<view class="title">PDA系统</view>
			<view class="form">
				<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType" style="margin-bottom: 30px;">
					<u-form-item label-width="150" :label-position="labelPosition" prop="account" label="账号">
						<u-input :border="border" placeholder="请输入账号" v-model="model.account" type="text" clearable>
						</u-input>
					</u-form-item>
					
					<u-form-item label-width="150" :label-position="labelPosition" prop="password" label="密码"
						style="margin-top: 20px;">
						<u-input :border="border" placeholder="请输入密码" v-model="model.password" type="password"
							clearable>
						</u-input>
					</u-form-item>
					<u-form-item label-width="150" :label-position="labelPosition" prop="passwordd" label="密码"
						style="margin-top: 20px;">
						<u-input :border="border" placeholder="请输入密码" v-model="model.passwordd" type="password"
							clearable>
						</u-input>
					</u-form-item>
				</u-form>
				<view class="btns">
					<u-button type="success" :loading="fetching" @click="goIndex" style="margin: 30rpx 0;width: 100%;">
						登录</u-button>
					<u-button type="success" :loading="fetching" @click="goHome" style="margin: 30rpx 0;width: 100%;">
						登录</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {//exceptionReport
		login
	} from '@/api/user.js';
	export default {
		data() {
			return {
				fetching: false,
				password: true,
				tabIndex: 0,
				labelPosition: 'top',
				errorType: ['message'],
				border: false,
				model: {
					account: 'admin',
					password: '1',
					passwordd:'123'
				},
				rules: {
					account: [{
						required: true,
						message: '请输入账号',
						trigger: 'change'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'change'
					}]
				},
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			tab(index) {
				this.tabIndex = index;
			},
			goLogin() {
				uni.navigateTo({
					url: '/pages/auth/login/login'
				})
			},
			goHome(){
				uni.navigateTo({
					url: "/pages/tabbar/homePage/home"
				})
			},
			goRegister() {
				uni.navigateTo({
					url: '/pages/auth/register/register'
				})
			},
			goForget() {
				uni.navigateTo({
					url: '/pages/auth/forget/forget'
				})
			},
			goIndex() {
				let that = this;
				that.$refs.uForm.validate(valid => {
					if (valid) {
						// 提交数据
						if (that.fetching) {
							return false;
						}
						that.fetching = true;
						// 显示loading状态
						uni.showLoading({
							mark: true,
							title: "登录中..."
						})
						login({
							usercode: that.model.account,
							password: that.model.password
						}).then((res) => {
							if (res && res.state == "ok") {
								uni.setStorageSync('usercode', res.data.usercode);
								uni.setStorageSync('username', res.data.username);
								uni.setStorageSync('account', "");
								uni.setStorageSync('token', res.data.token);
								uni.showToast({
									title: '登录成功',
									icon: 'none',
									duration: 1500
								})
								setTimeout(() => {
									that.fetching = false;
									uni.hideLoading();
									uni.reLaunch({
										url: '/pages/tabbar/index/index'
									})
								}, 500)
							} else if (res && res.state == "fail") {
								that.fetching = false;
								uni.hideLoading();
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 3000
								})
							}
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.login-box {
		width: 100%;
		height: 100%;
	}

	.title {
		color: #fff;
		text-align: center;
		font-weight: 600;
		font-size: 25px;
	}

	::v-deep .u-form-item {
		color: #fff !important;

		.u-input__input {
			color: #ffffff !important;
			font-size: 14px !important;
			padding-top: 8px;
		}

		// .u-flex {
		// 	display: flex !important;
		// 	align-items: center !important;
		// 	justify-content: center !important;
		// 	background-color: #fff !important;
		// 	color: #171A1D !important;
		// 	border-radius: 4px !important;
		// }
	}
</style>
